<template>
  <div>
    <el-row>
      <el-card>
        <el-row>
          <el-col :span="6.5">
            <div>
              <img src="src/assets/zut.png" />
            </div>
          </el-col>
          <el-col :span="8" style="text-align:left;">
            <div
              style="font-family: myFirstFont;font-weight:bold;font-size: 250%"
            >
              学号/工号：{{ this.person.id }}<br />
              姓名：{{ this.person.name }}<br />
              年龄：{{ this.person.age }}<br />
              性别：{{ this.person.sex }}<br />
              人员类别：{{ this.person.role }}<br />
              住址：{{ this.person.apartment }}<br />
              电话：{{ this.person.phone }}<br />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row>
      <el-card>
        <div style="margin-top: 15px;" id="app">
          <el-table
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              prop="person_name"
              label="人员名称"
              sortable
              width="100"
            ></el-table-column>
            <el-table-column
              prop="area_name"
              label="区域名称"
              sortable
              width="150"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="通行状态"
              sortable
              width="200"
            >
              <template slot-scope="scope">
                <p v-if="scope.row.status == 'A'">正常</p>
                <p v-if="scope.row.status == 'B'">非正常时间进出</p>
                <p v-if="scope.row.status == 'C'">越权进出</p>
              </template>
            </el-table-column>
            <el-table-column prop="direction" label="进出" sortable width="100">
              <template slot-scope="scope">
                <p v-if="scope.row.direction == 'A'">进入</p>
                <p v-if="scope.row.direction == 'B'">离开</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="recordDate"
              label="通行时间"
              sortable
              width="200"
            ></el-table-column>
            <el-table-column align="right" width="130">
              <template slot="header">
                <el-button
                  type="primary"
                  @click="exportExcel()"
                  size="mini"
                  plain
                  >导出所选中信息</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin: 15px 0px;"
            prev-text="上一页"
            next-text="下一页"
            background
            layout="prev, pager, next, sizes, jumper, total"
            :page-sizes="[5, 10, 20, 40, 100, 500, 50000]"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNow"
            @current-change="findPage"
            @size-change="findSize"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import XLSX from "xlsx";
import getPerson from "@/plugins/getPerson.js";
import format from "../../plugins/format";
var list = [];

export function validateAccountNumber(str) {
  const reg = /^([1-9]{1})$/;
  return reg.test(str);
}

export default {
  data() {
    let num = /^(0|\+?[1-9][0-9]*)$/;
    let isNum = (rule, value, callback) => {
      if (!num.test(value)) {
        return callback(new Error("格式错误"));
      } else {
        callback();
      }
    };
    let percent = /^(?:[1-9]?\d|100)$/;
    let isPercent = (rule, value, callback) => {
      if (!percent.test(value)) {
        return callback(new Error("请输入0-100的整数"));
      } else {
        callback();
      }
    };
    const _this = this;
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      save: false,
      delete_button: 1,
      update_button: 1,
      fileList: [],
      jsonData: null,
      jsonStr: "",
      setExcel: false,
      getExcel: false,
      loading: false,
      total: 0, //总页数，从后台查询
      pageNow: 1, //当前页数，默认为1
      pageSize: 5, //当前页显示的数据条数，默认为5
      input4: null,
      select: "请选择",
      tableData: null,
      multipleSelection: [],
      person: {
        id: this.$route.query.id,
        name: "",
        sex: "",
        age: "",
        role: null,
        apartment: "",
        phone: "",
      },
      saveForm: {
        id: "",
      },
    };
  },
  created() {
    const _this = this;
    _this.$http.person.findOne(_this.person.id).then(function(resp) {
      if (resp.code == 2000) {
        _this.person = resp.data;
        _this.person = getPerson(_this.person);
      }
    });
    _this.findAllTableDataByPage();
  },
  mounted() {
    this.initHistogram_grade();
    this.initHistogram_apartment();
    this.initPie_grade();
    this.initPie_apartment();
  },
  methods: {
    exportExcel() {
      //创建book
      var wb = XLSX.utils.book_new();
      //json转sheet
      var ws = XLSX.utils.json_to_sheet(this.multipleSelection, {});
      //设置列宽
      ws["!cols"] = [{ width: 15 }, { width: 15 }, { width: 30 }];
      var timestamp = new Date().getTime();
      //sheet写入book
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      //输出
      XLSX.writeFile(wb, "file_" + timestamp + ".xlsx");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log(val)
    },
    findPage(page) {
      // console.log('当前页数：' + page)
      this.pageNow = page;
      this.findAllTableDataByPage();
    },
    findSize(size) {
      // console.log('当前页面记录条数：' + size)
      this.pageSize = size;
      this.findAllTableDataByPage();
    },
    findAllTableDataByPage() {
      const _this = this;
      let pageRequest = {
        pageNow: this.pageNow,
        pageSize: this.pageSize,
        p_id: this.$route.query.id,
      };
      this.$http.record.findByPageByP_id(pageRequest).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].area_name = res.data[i].area.name;
          this.tableData[i].person_name = res.data[i].person.name;
        }
      });
    },
    initHistogram_grade: function() {
      var chart_data;
      this.$http.person.findAll().then(function(resp) {
        chart_data = resp.data;
        var grade_data = [
          {
            man: 0,
            woman: 0,
            both: 0,
          },
          {
            man: 0,
            woman: 0,
            both: 0,
          },
          {
            man: 0,
            woman: 0,
            both: 0,
          },
          {
            man: 0,
            woman: 0,
            both: 0,
          },
          {
            man: 0,
            woman: 0,
            both: 0,
          },
        ];
        for (let i = 0; i < chart_data.length; i++) {
          switch (chart_data[i].role) {
            case 0: {
              grade_data[0].both++;
              if (chart_data[i].sex == 0) {
                grade_data[0].man++;
              } else {
                grade_data[0].woman++;
              }
              break;
            }
            case 1: {
              grade_data[1].both++;
              if (chart_data[i].sex == 0) {
                grade_data[1].man++;
              } else {
                grade_data[1].woman++;
              }
              break;
            }
            case 2: {
              grade_data[2].both++;
              if (chart_data[i].sex == 0) {
                grade_data[2].man++;
              } else {
                grade_data[2].woman++;
              }
              break;
            }
            case 3: {
              grade_data[3].both++;
              if (chart_data[i].sex == 0) {
                grade_data[3].man++;
              } else {
                grade_data[3].woman++;
              }
              break;
            }
            case 4: {
              grade_data[4].both++;
              if (chart_data[i].sex == 0) {
                grade_data[4].man++;
              } else {
                grade_data[4].woman++;
              }
              break;
            }
          }
        }
        var myChart = echarts.init(document.getElementById("histogram_grade"));
        var option = {
          title: {
            text: "人员性别分布",
          },
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ["product", "男性", "女性", "总人数"],
              [
                "本科生",
                grade_data[1].man,
                grade_data[1].woman,
                grade_data[1].both,
              ],
              [
                "研究生",
                grade_data[2].man,
                grade_data[2].woman,
                grade_data[2].both,
              ],
              [
                "教工",
                grade_data[3].man,
                grade_data[3].woman,
                grade_data[3].both,
              ],
              [
                "职工",
                grade_data[4].man,
                grade_data[4].woman,
                grade_data[4].both,
              ],
              [
                "外来人员",
                grade_data[0].man,
                grade_data[0].woman,
                grade_data[0].both,
              ],
            ],
          },
          xAxis: { type: "category" },
          yAxis: {},
          series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      });
    },
    initHistogram_apartment: function() {
      var chart_data;
      this.$http.person.findAll().then(function(resp) {
        chart_data = resp.data;
        var apartment_data = [];
        for (let i = 0; i < 22; i++) {
          apartment_data[i] = 0;
        }
        for (let i = 0; i < chart_data.length; i++) {
          switch (chart_data[i].apartment) {
            case "A1": {
              apartment_data[0]++;
              break;
            }
            case "A2": {
              apartment_data[1]++;
              break;
            }
            case "A3": {
              apartment_data[2]++;
              break;
            }
            case "A4": {
              apartment_data[3]++;
              break;
            }
            case "A5": {
              apartment_data[4]++;
              break;
            }
            case "A6": {
              apartment_data[5]++;
              break;
            }
            case "A7": {
              apartment_data[6]++;
              break;
            }
            case "A8": {
              apartment_data[7]++;
              break;
            }
            case "A9": {
              apartment_data[8]++;
              break;
            }
            case "B1": {
              apartment_data[9]++;
              break;
            }
            case "B2": {
              apartment_data[10]++;
              break;
            }
            case "B3": {
              apartment_data[11]++;
              break;
            }
            case "B4": {
              apartment_data[12]++;
              break;
            }
            case "B5": {
              apartment_data[13]++;
              break;
            }
            case "B6": {
              apartment_data[14]++;
              break;
            }
            case "B7": {
              apartment_data[15]++;
              break;
            }
            case "B8": {
              apartment_data[16]++;
              break;
            }
            case "B9": {
              apartment_data[17]++;
              break;
            }
            case "B10": {
              apartment_data[18]++;
              break;
            }
            case "B12": {
              apartment_data[19]++;
              break;
            }
            case "C1": {
              apartment_data[20]++;
              break;
            }
            case "D1": {
              apartment_data[21]++;
              break;
            }
          }
        }
        var myChart = echarts.init(
          document.getElementById("histogram_apartment")
        );
        var dataAxis = [
          "北一",
          "北二",
          "北三",
          "北四",
          "北五",
          "北六",
          "北七",
          "北八",
          "北九",
          "南一",
          "南二",
          "南三",
          "南四",
          "南五",
          "南六",
          "南七",
          "南八",
          "南九",
          "南十",
          "南十二",
          "教职公寓",
          "校外",
        ];
        var data = [
          apartment_data[0],
          apartment_data[1],
          apartment_data[2],
          apartment_data[3],
          apartment_data[4],
          apartment_data[5],
          apartment_data[6],
          apartment_data[7],
          apartment_data[8],
          apartment_data[9],
          apartment_data[10],
          apartment_data[11],
          apartment_data[12],
          apartment_data[13],
          apartment_data[14],
          apartment_data[15],
          apartment_data[16],
          apartment_data[17],
          apartment_data[18],
          apartment_data[19],
          apartment_data[20],
          apartment_data[21],
        ];
        var yMax = Math.max(...data);
        var dataShadow = [];
        for (var i = 0; i < data.length; i++) {
          dataShadow.push(yMax);
        }

        var option = {
          tooltip: {},
          title: {
            text: "人员住宿分布",
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: true,
              textStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            z: 10,
          },
          yAxis: {
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#999",
              },
            },
          },
          dataZoom: [
            {
              type: "inside",
            },
          ],
          series: [
            {
              type: "bar",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" },
                ]),
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#2378f7" },
                    { offset: 0.7, color: "#2378f7" },
                    { offset: 1, color: "#83bff6" },
                  ]),
                },
              },
              data: data,
            },
          ],
        };

        // Enable data zoom when user click bar.
        var zoomSize = 6;
        myChart.on("click", function(params) {
          console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
          myChart.dispatchAction({
            type: "dataZoom",
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
              dataAxis[
                Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
              ],
          });
        });
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      });
    },
    initPie_grade: function() {
      var chart_data;
      this.$http.person.findAll().then(function(resp) {
        chart_data = resp.data;
        var grade_data = [0, 0, 0, 0, 0];
        for (let i = 0; i < chart_data.length; i++) {
          switch (chart_data[i].role) {
            case 0: {
              grade_data[0]++;
              break;
            }
            case 1: {
              grade_data[1]++;
              break;
            }
            case 2: {
              grade_data[2]++;
              break;
            }
            case 3: {
              grade_data[3]++;
              break;
            }
            case 4: {
              grade_data[4]++;
              break;
            }
          }
        }
        var myChart = echarts.init(document.getElementById("pie_grade"));
        var option = {
          title: {
            text: "人员分布",
            x: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: ["外来人员", "本科生", "研究生", "教工", "职工"],
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
                { value: grade_data[0], name: "外来人员" },
                { value: grade_data[1], name: "本科生" },
                { value: grade_data[2], name: "研究生" },
                { value: grade_data[3], name: "教工" },
                { value: grade_data[4], name: "职工" },
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      });
    },
    initPie_apartment: function() {
      var chart_data;
      this.$http.person.findAll().then(function(resp) {
        chart_data = resp.data;
        var apartment_data = [];
        for (let i = 0; i < 22; i++) {
          apartment_data[i] = 0;
        }
        for (let i = 0; i < chart_data.length; i++) {
          switch (chart_data[i].apartment) {
            case "A1": {
              apartment_data[0]++;
              break;
            }
            case "A2": {
              apartment_data[1]++;
              break;
            }
            case "A3": {
              apartment_data[2]++;
              break;
            }
            case "A4": {
              apartment_data[3]++;
              break;
            }
            case "A5": {
              apartment_data[4]++;
              break;
            }
            case "A6": {
              apartment_data[5]++;
              break;
            }
            case "A7": {
              apartment_data[6]++;
              break;
            }
            case "A8": {
              apartment_data[7]++;
              break;
            }
            case "A9": {
              apartment_data[8]++;
              break;
            }
            case "B1": {
              apartment_data[9]++;
              break;
            }
            case "B2": {
              apartment_data[10]++;
              break;
            }
            case "B3": {
              apartment_data[11]++;
              break;
            }
            case "B4": {
              apartment_data[12]++;
              break;
            }
            case "B5": {
              apartment_data[13]++;
              break;
            }
            case "B6": {
              apartment_data[14]++;
              break;
            }
            case "B7": {
              apartment_data[15]++;
              break;
            }
            case "B8": {
              apartment_data[16]++;
              break;
            }
            case "B9": {
              apartment_data[17]++;
              break;
            }
            case "B10": {
              apartment_data[18]++;
              break;
            }
            case "B12": {
              apartment_data[19]++;
              break;
            }
            case "C1": {
              apartment_data[20]++;
              break;
            }
            case "D1": {
              apartment_data[21]++;
              break;
            }
          }
        }
        var myChart = echarts.init(document.getElementById("pie_apartment"));
        var option = {
          title: {
            text: "人员住宿分布",
            x: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            left: "left",
            right: "right",
            data: [],
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
                { value: apartment_data[0], name: "北苑一号宿舍楼" },
                { value: apartment_data[1], name: "北苑二号宿舍楼" },
                { value: apartment_data[2], name: "北苑三号宿舍楼" },
                { value: apartment_data[3], name: "北苑四号宿舍楼" },
                { value: apartment_data[4], name: "北苑五号宿舍楼" },
                { value: apartment_data[5], name: "北苑六号宿舍楼" },
                { value: apartment_data[6], name: "北苑七号宿舍楼" },
                { value: apartment_data[7], name: "北苑八号宿舍楼" },
                { value: apartment_data[8], name: "北苑九号宿舍楼" },
                { value: apartment_data[9], name: "北苑一号宿舍楼" },
                { value: apartment_data[10], name: "北苑二号宿舍楼" },
                { value: apartment_data[11], name: "北苑三号宿舍楼" },
                { value: apartment_data[12], name: "北苑四号宿舍楼" },
                { value: apartment_data[13], name: "北苑五号宿舍楼" },
                { value: apartment_data[14], name: "北苑六号宿舍楼" },
                { value: apartment_data[15], name: "北苑七号宿舍楼" },
                { value: apartment_data[16], name: "北苑八号宿舍楼" },
                { value: apartment_data[17], name: "北苑九号宿舍楼" },
                { value: apartment_data[18], name: "北苑十号宿舍楼" },
                { value: apartment_data[19], name: "北苑十二号宿舍楼" },
                { value: apartment_data[20], name: "教职公寓" },
                { value: apartment_data[21], name: "校外" },
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped></style>
